var news  = [
    {
        classId: 1,
        name: '岁月',
        img:'img/37.jpg',
        href:'years.html',
        body:'哪知岁月总是催人老，等到知时已迟了'
    },
    {
        classId: 2,
        name: '风景',
        href:'scenery.html',
        img:'img/38.jpg',
        body:'再美的风景，也需要欣赏它的人'
    },
    {
        classId: 3,
        name: '旅游日记',
        href:'diary.html',
        img:'img/39.jpg',
        body:'旅游重要的不是重点，而是过程'
    },
    {
        classId: 4,
        name: '相爱的人',
        href:'love.html',
        img:'img/40.jpg',
        body:'犹如黑暗中的烛光，照亮了整个人类的历史'
    },
    {
        classId: 5,
        name: '建筑',
        href:'architecture.html',
        img:'img/41.jpg',
        body:'不同的外形，相同的内在'
    },
    {
        classId: 6,
        name: '神奇的自然',
        href:'nature.html',
        img:'img/42.jpg',
        body:'有一种神奇叫做孤独的孕育'
    }
]
var conter = [
    {
        id: 1,
        classId: 1,
        title: "岁月",
        time: "发布日期：2017-06-02",
        item1: "客户：你看这个logo放大的同时能不能缩小一点设计师：……你说啥？",
        item2: "客户：我感觉这个大小不合适，整体大一点，占面积小一点",
        item3: "设计师：……你说啥？",
        item4: "客户：TM到底能不能干了",
        item5: "设计师：我能力有限。。。",
        img1: "img/43.jpg",
        img1: "img/44.jpg",
        img1: "img/45.jpg"
    },
    {
        id: 2,
        classId: 2,
        title: "风景",
        time: "发布日期：2017-06-02",
        item1: '设计师"高考"真题，你能那几分？',
        item2: "Q：你花了一整天的时间，绞尽脑汁，终于做出一张极其满意的Banner图，发给客户75秒后，收到一段长达60秒的语音反馈，言辞激烈。作为设计师，此时你应该怎么做？",
        item3: "A：准备重做。",
        item4: "Q：快到下班时间了，公司准备聚餐的同事分成了两拨，一拨准备去吃烤肉，另一拨准备去吃火锅，此时，你应该怎么做？",
        item5: "A：泡上一杯咖啡，正式开始一天的工作。",
        item6: "Q：你的女朋友给你发微信说，她大姨的二舅的外甥的侄女准备新开一家奶茶店，想让你帮忙免费设计一款logo，此时你应该怎么做？",
        item5: "A：一巴掌抽醒自己，设计师哪儿来的女朋友",
        img1: "img/46.jpg",
        img1: "img/47.jpg",
        img1: "img/48.jpg"
    },
    {
        id: 3,
        classId: 3,
        title: "相爱的人",
        time: "发布日期：2017-06-02",
        item1: '设计师奇葩求职日记"高考"真题，你能那几分？',
        item2: "面试官：面试设计师的？",
        item3: "求职者：嗯嗯",
        item4: "面试官：太好了，正好公司电脑换了，你去帮忙修一下吧",
        item5: "②",
        item6: "面试官：作为设计师，你有什么特长吗？",
        item5: "求职者：我会一些手绘",
        item5: "面试官：手绘？会画符咒吗？",
        item5: "求职者：符……符咒？",
        item5: "面试官：对！我们老板说公司风水不好，正想改一下运势呢！",
        item5: "求职者：我是设计师，不是萨满法师……",
        item5: "③",
        item5: "求职面试官：你是专业设计师是吧，那你说说我身上这件衣服的色值多少？者：我是设计师，不是萨满法师……",
        item5: "求职者：……",
        img1: "img/49.jpg",
        img1: "img/50.jpg",
        img1: "img/51.jpg"
    },
    {
        id: 4,
        classId: 4,
        title: "建筑",
        time: "发布日期：2017-06-02",
        item1: '设计师奇葩求职日记"高考"真题，你能那几分？',
        item2: "面试官：面试设计师的？",
        item3: "求职者：嗯嗯",
        item4: "面试官：太好了，正好公司电脑换了，你去帮忙修一下吧",
        item5: "②",
        item6: "面试官：作为设计师，你有什么特长吗？",
        item5: "求职者：我会一些手绘",
        item5: "面试官：手绘？会画符咒吗？",
        item5: "求职者：符……符咒？",
        item5: "面试官：对！我们老板说公司风水不好，正想改一下运势呢！",
        item5: "求职者：我是设计师，不是萨满法师……",
        item5: "③",
        item5: "求职面试官：你是专业设计师是吧，那你说说我身上这件衣服的色值多少？者：我是设计师，不是萨满法师……",
        item5: "求职者：……",
        img1: "img/52.png",
        img1: "img/53.jpg",
        img1: "img/54.jpg"
    },
    {
        id: 5,
        classId: 5,
        title: "建筑",
        time: "发布日期：2017-06-02",
        item1: '设计师奇葩求职日记"高考"真题，你能那几分？',
        item2: "面试官：面试设计师的？",
        item3: "求职者：嗯嗯",
        item4: "面试官：太好了，正好公司电脑换了，你去帮忙修一下吧",
        item5: "②",
        item6: "面试官：作为设计师，你有什么特长吗？",
        item5: "求职者：我会一些手绘",
        item5: "面试官：手绘？会画符咒吗？",
        item5: "求职者：符……符咒？",
        item5: "面试官：对！我们老板说公司风水不好，正想改一下运势呢！",
        item5: "求职者：我是设计师，不是萨满法师……",
        item5: "③",
        item5: "求职面试官：你是专业设计师是吧，那你说说我身上这件衣服的色值多少？者：我是设计师，不是萨满法师……",
        item5: "求职者：……",
        img1: "img/55.png",
        img1: "img/56.jpg",
        img1: "img/57.jpg"
    },
    {
        id: 6,
        classId: 6,
        title: "神奇的自然",
        time: "发布日期：2017-06-02",
        item1: '设计师奇葩求职日记"高考"真题，你能那几分？',
        item2: "面试官：面试设计师的？",
        item3: "求职者：嗯嗯",
        item4: "面试官：太好了，正好公司电脑换了，你去帮忙修一下吧",
        item5: "②",
        item6: "面试官：作为设计师，你有什么特长吗？",
        item5: "求职者：我会一些手绘",
        item5: "面试官：手绘？会画符咒吗？",
        item5: "求职者：符……符咒？",
        item5: "面试官：对！我们老板说公司风水不好，正想改一下运势呢！",
        item5: "求职者：我是设计师，不是萨满法师……",
        item5: "③",
        item5: "求职面试官：你是专业设计师是吧，那你说说我身上这件衣服的色值多少？者：我是设计师，不是萨满法师……",
        item5: "求职者：……",
        img1: "img/58.png",
        img1: "img/59.jpg",
        img1: "img/60.jpg"
    }
]

function initNews(arr){
    if(typeof arr === 'undefined'){
        // 数组切割，保留原来数组内容，并不是真的切掉
        arr = news.slice();
        arr.length = 6
    }
    var oNews = document.getElementById('paging');
    oNews.innerHTML = ''
    for(index =0;index<arr.length;index++){
        var item = arr[index];
        var oLi = document.createElement('li')
        // var oDiv = oLi.getElementsByClassName('div')
        oLi.innerHTML += `<div><div class="box-1"><a><img src="${item.img}" alt=""></a></div><div class="box-2"><a href="${item.href}"><span>${item.name}</span></a><p>${item.body}</p></div></div>`
        oLi.onclick = function(){
            // alert(`${item.href}?id=${conter.classId}`)
            window.location.href=`${item.href}?${conter.classId}`

         
        }

        oNews.appendChild(oLi)
        //  给新建的li添加开始动画
	    // var clientHeight = document.documentElement.clientHeight
        // document.onscroll = function(){
        //     for(index = 0; index< oLi.length; index++){
		// 	    var al = oLi[index];
		// 	    // console.log(el)
		// 	    if(al.getBoundingClientRect().top<clientHeight){
		// 		    al.classList.add('animated')
		// 		    al.classList.add('bounceInUp')
		// 	    }
		//     }
        // }
    }
    
}
initNews()


// function initPage(){
//     var oPage = document.getElementById('page')
//     for(index = 0;index< news.length/3;index++){
//         var oSpan = document.createElement('span')
//         oSpan.innerHTML = (index)
//         oSpan.onclick = function(){
//             // 每页6个
//             let item = news.slice(this.innerHTML * 4,(+this.innerHTML+1) * 4)
            
//             initNews(item)
//         }
//         oPage.appendChild(oSpan)
//     }
// }
// initPage()


